<template>
	<el-container style="min-height: 100Vh;">
		<menuList @childEvent="addTab" :editableTabsValue="editableTabsValue"></menuList>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<headerNav ></headerNav>
			</el-header>

			<el-main>
				<el-tabs v-model="editableTabsValue" @tab-click="clickTab" type="card" class="demo-tabs" closable @tab-remove="removeTab">
					<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name" :lazy="true" >
						<RouterView v-if="editableTabsValue===item.name" />
					</el-tab-pane> 
          
				</el-tabs>
				
			</el-main>
		</el-container>
	</el-container>
</template>

<script setup>
import menuList from './home/MenuLeft.vue'
import headerNav from './home/headerNav'
import { useRouter } from 'vue-router';
const router = useRouter();
import { ref ,onMounted } from 'vue'

const editableTabsValue = ref('/IndexHome/homePage')
const editableTabs = ref([
  {
    title: '首页',
    name: '/IndexHome/homePage'
  }
])
onMounted(() => {
  //刷新从缓存中获取标签页数组和状态
  let tabData = JSON.parse(sessionStorage.getItem("editable"));
  if(tabData){
    editableTabs.value = tabData.editableTabs;
    editableTabsValue.value = tabData.editableTabsValue
  }
});


const addTab = (value) => {
  console.log('子组件触发了事件，传递的值是：', value);
  let oldTabs = []
  editableTabs.value.forEach((item) => {
        oldTabs.push(item.name)
    });
 
    if (!oldTabs.includes(value.uri)) {
        editableTabs.value.push({ title:value.power_name,
    name: value.uri, })
    }
  editableTabsValue.value = value.uri
  sessionStorage.setItem("editable", JSON.stringify({editableTabs:editableTabs.value,editableTabsValue:editableTabsValue.value}));
};
const clickTab = (tab) => {
    const { props } = tab
    router.push({ path: props.name })
    sessionStorage.setItem("editable", JSON.stringify({editableTabs:editableTabs.value,editableTabsValue:props.name}));
}
const removeTab = (targetName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  sessionStorage.setItem("editable", JSON.stringify({editableTabs:editableTabs.value,editableTabsValue:editableTabsValue.value}));
  router.push({ path: activeName })
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
	background-color: #B3C0D1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	color: #333;
}
</style>